<template>
  <el-dialog title="选择生产线" v-model="visible" width="800px" append-to-body>
    <el-form :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="生产线名称" prop="lineName">
        <el-input
          v-model="queryParams.lineName"
          placeholder="请输入生产线名称"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="lineList">
      <el-table-column label="生产线ID" prop="lineId" width="100" />
      <el-table-column label="生产线名称" prop="lineName" />
      <el-table-column label="生产线编号" prop="lineCode" />
      <el-table-column label="所属车间" prop="workshopName" />
      <el-table-column label="操作" width="100" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleSelect(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="text-align: center;">
      <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <!-- <el-button type="primary" @click="handleConfirm">确定</el-button> -->
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { listLine } from '@/api/bdm/line';

const visible = ref(false);
const loading = ref(false);
const lineList = ref([]);
const total = ref(0);
const queryRef = ref();

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  lineName: null
});

// 添加重置查询方法
function resetQuery() {
  queryRef.value.resetFields();
  handleQuery();
}

// 添加取消处理方法
// 修改取消方法
// 保留这个合并后的 handleCancel 方法
function handleCancel() {
  visible.value = false;
  selectHandlers.value = []; // 取消时清空处理器
  if (unwatch) unwatch(); // 清除监听
}

// 删除下面这个重复的 handleCancel 定义（91-95行）
// function handleCancel() {
//   visible.value = false;
//   // 取消时清除监听
//   if (unwatch) unwatch();
// }

// 添加确定方法
function handleConfirm() {
  if (selectedLine.value) {
    emit('select', selectedLine.value);
    visible.value = false;
  } else {
    proxy.$modal.msgError("请先选择一条生产线");
  }
}

const emit = defineEmits(['select']);

let unwatch = null;

function show() {
  visible.value = true;
  getList();
  
  // 每次打开对话框时清除之前的监听
  if (unwatch) unwatch();
  
  // 设置新的监听
  unwatch = watch(selectedLine, (newVal) => {
    if (newVal) {
      emit('select', newVal);
      visible.value = false;
    }
  });
}

function getList() {
  loading.value = true;
  listLine(queryParams.value).then(response => {
    lineList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

// 添加选择处理方法
const selectedLine = ref(null);

const selectHandlers = ref([]);

function onSelect(handler) {
  selectHandlers.value = []; // 清空之前的监听
  selectHandlers.value.push(handler);
}

function handleSelect(row) {
  selectedLine.value = row;
  selectHandlers.value.forEach(handler => handler(row));
  selectHandlers.value = []; // 清空处理器
  visible.value = false;
}

defineExpose({
  show,
  selectedLine,
  onSelect  // 添加这行，暴露onSelect方法
});
</script>